<template>
  <!-- 农作物产值分析 -->
  <div class="Project-box AnalysisCropOutput-box">
    <div class="AnalyTitle1 publicTiTle">农作物产值分析</div>
    <div class="AnalyTitle2 publicETiTle">总产值</div>
    <div class="AnalyTitle3 publicETiTle">农作物市场价格</div>
    <div class="AnalyTitle4 publicTiTle">盈亏综合分析</div>
    <div class="AnalyTitle5 publicETiTle">净利润</div>
    <div class="AnalyUnit1 publicUnit">万元</div>
    <div class="AnalyUnit2 publicUnit">万元</div>
    <div class="AnalysisCropOutput-box1">
      <Xialakuang :xialaList="xialaList" @belowEmits="belowEmits" />
    </div>
    <div class="AnalysisCropOutput-box2">00000000</div>
    <div class="AnalysisCropOutput-box3">
      <DiagonalBarChart :DiagonalBarChartObj="DiagonalBarChartObj" />
    </div>
    <div class="AnalysisCropOutput-box4">
      <div class="Box4-L">今日均价:&nbsp; 0.0元/斤</div>
      <div class="Box4-R">
        相比昨日:
        <span>&nbsp; -0.14%</span>
        <div class="icon1"></div>
        <!-- <div class="icon1"></div> -->
      </div>
    </div>
    <div class="AnalysisCropOutput-box5">
      <div class="Box5-1">
        <Xialakuang :xialaList="xialaList" @belowEmits="belowEmits" />
      </div>
      <div class="Box5-2">
        <Xialakuang :xialaList="xialaList" @belowEmits="belowEmits" />
      </div>
      <div class="Box5-3">
        <Xialakuang :xialaList="xialaList" @belowEmits="belowEmits" />
      </div>
    </div>
    <div class="AnalysisCropOutput-box6">
      <lineChartEcharts :lineChartList="lineChartList" />
    </div>
    <div class="AnalysisCropOutput-box7">00000000</div>
    <div class="AnalysisCropOutput-box8">
      <div class="Box8-1">
        <pieChartEcahrts :pieChartObj="pieChartObj" />
      </div>
      <div class="Box8-2">
        <div class="Box8-2Tit">总收入对比</div>
        <div class="wenzi-box">今年总收入: <span>50</span>%</div>
        <div class="JinduBox">
          <el-progress
            :percentage="50"
            stroke-width="5"
            text-inside="true"
            stroke-linecap="square"
            color="rgba(55, 225, 225)"
          >
            <!-- <div class="kong"></div> -->
          </el-progress>
        </div>
      </div>
      <div class="Box8-3">
        <div class="wenzi-box">去年总收入: <span>50</span>%</div>
        <div class="JinduBox">
          <el-progress
            :percentage="50"
            stroke-width="5"
            text-inside="true"
            stroke-linecap="square"
            color="rgba(255, 167, 38)"
          >
            <!-- <div class="kong"></div> -->
          </el-progress>
        </div>
      </div>
    </div>
    <div class="AnalysisCropOutput-box9">
      <div class="Box8-1">
        <pieChartEcahrts :pieChartObj="pieChartObj" />
      </div>
      <div class="Box8-2">
        <div class="Box8-2Tit">总收入对比</div>
        <div class="wenzi-box">今年总收入: <span>50</span>%</div>
        <div class="JinduBox">
          <el-progress
            :percentage="50"
            stroke-width="5"
            text-inside="true"
            stroke-linecap="square"
            color="rgba(55, 225, 225)"
          >
            <!-- <div class="kong"></div> -->
          </el-progress>
        </div>
      </div>
      <div class="Box8-3">
        <div class="wenzi-box">去年总收入: <span>50</span>%</div>
        <div class="JinduBox">
          <el-progress
            :percentage="50"
            stroke-width="5"
            text-inside="true"
            stroke-linecap="square"
            color="rgba(255, 167, 38)"
          >
            <!-- <div class="kong"></div> -->
          </el-progress>
        </div>
      </div>
    </div>
    <div class="AnalysisCropOutput-box10">
      <div class="Box8-1">
        <pieChartEcahrts :pieChartObj="pieChartObj" />
      </div>
      <div class="Box8-2">
        <div class="Box8-2Tit">总收入对比</div>
        <div class="wenzi-box">今年总收入: <span>50</span>%</div>
        <div class="JinduBox">
          <el-progress
            :percentage="50"
            stroke-width="5"
            text-inside="true"
            stroke-linecap="square"
            color="rgba(55, 225, 225)"
          >
            <!-- <div class="kong"></div> -->
          </el-progress>
        </div>
      </div>
      <div class="Box8-3">
        <div class="wenzi-box">去年总收入: <span>50</span>%</div>
        <div class="JinduBox">
          <el-progress
            :percentage="50"
            stroke-width="5"
            text-inside="true"
            stroke-linecap="square"
            color="rgba(255, 167, 38)"
          >
            <!-- <div class="kong"></div> -->
          </el-progress>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import Xialakuang from "@/components/xialakuang.vue"
import DiagonalBarChart from "@/components/DiagonalBarChart.vue"
import lineChartEcharts from "@/components/lineChartEcharts.vue"
import pieChartEcahrts from "@/components/pieChartEcahrtsCun.vue"

const pieChartObj = ref({
  radius: ["60%", "90%"],
  center: ["50%", "50.5%"],
  colorList: [
    ["rgba(52, 215, 215,.5)", "rgba(52, 215, 215)"],
    ["rgba(237, 159, 39,.5)", "rgba(237, 159, 39)"]
  ],
  pieChartList: [
    {
      value: 100,
      name: "现有学校"
    },
    { value: 80, name: "在建学校" }
  ]
})
const lineChartList = ref({
  grid: {
    top: 40,
    left: 10,
    right: 10,
    bottom: 10,
    containLabel: true
  },
  xData: ["12-1", "12-2", "12-3", "12-4", "12-5", "12-6"],
  seriesObj: {
    价格: [10, 20, 30, 20, 50, 60]
  },
  // 从浅到深(先量上面再量下面)
  colorList: {
    价格: ["rgba(100, 235, 197,.4)", "rgba(100, 235, 197)"]
  },
  danwei: "单位: 元",
  isShowlegend: false, // 判断需不需要展示图例的布尔值
  labelShow: false, //是否展示图片
  smooth: true //是否平滑曲线
})
const xialaList = ref([
  {
    name: "全部",
    id: 1
  },
  {
    name: "一年级",
    id: 2
  },
  {
    name: "二年级",
    id: 3
  }
])
const DiagonalBarChartObj = ref({
  Xdata: [
    "农作物一",
    "农作物二",
    "农作物三",
    "农作物四",
    "农作物五",
    "农作物六",
    "农作物七",
    "农作物八"
  ],
  Ydata: [1000, 99, 50, 80, 60, 50, 40, 30],
  danwei: "万元",
  fontSize: 30
})
const belowEmits = (e) => {
  console.log(e)
}
</script>
<style scoped lang="less">
.AnalysisCropOutput-box {
  background: url("@/assets/overallOverview/nzwcz.png") no-repeat center;
  background-size: 100% 100%;
  background-color: rgba(15, 75, 63);
  position: relative;
  .AnalyTitle1 {
    position: absolute;
    left: 30px;
    top: 2px;
  }
  .AnalyTitle2 {
    position: absolute;
    left: 65px;
    top: 92px;
  }
  .AnalyTitle3 {
    position: absolute;
    left: 13px;
    top: 296px;
  }
  .AnalyTitle4 {
    position: absolute;
    left: 30px;
    top: 615px;
  }
  .AnalyTitle5 {
    position: absolute;
    left: 65px;
    top: 664px;
  }
  .AnalyUnit1 {
    position: absolute;
    left: 315px;
    top: 93px;
  }
  .AnalyUnit2 {
    position: absolute;
    left: 315px;
    top: 666px;
  }
  .AnalysisCropOutput-box1 {
    width: 134px;
    height: 32px;
    position: absolute;
    top: 45px;
    right: 15px;
    // background-color: red;
  }
  .AnalysisCropOutput-box2 {
    width: 150px;
    height: 32px;
    position: absolute;
    top: 88px;
    right: 87px;
    font-size: 22px;
    text-align: right;
    color: #59f9e1;
    // background-color: red;
  }
  .AnalysisCropOutput-box3 {
    width: 380px;
    height: 165px;
    position: absolute;
    top: 128px;
    left: 10px;
    // background-color: rgba(29, 56, 65, 0.5);
  }
  .AnalysisCropOutput-box4 {
    width: 380px;
    height: 36px;
    position: absolute;
    top: 325px;
    left: 10px;
    display: flex;
    // background-color: rgba(29, 56, 65, 0.5);
    .Box4-L {
      box-sizing: border-box;
      padding-left: 10px;
      width: 50%;
      height: 36px;
      line-height: 36px;
      font-size: 16px;
      color: #fff;
    }
    .Box4-R {
      box-sizing: border-box;
      padding-left: 10px;
      width: 50%;
      height: 36px;
      line-height: 36px;
      font-size: 16px;
      color: #fff;
      display: flex;
      align-items: center;
      span {
        color: #ff6060;
      }
      .icon {
        margin-left: 5px;
        width: 15px;
        height: 15px;
        // background-color: red;
        background: url("@/assets/AnalysisCropOutput/SHANGSHENG@2x.png")
          no-repeat center;
        background-size: 100% 100%;
      }
      .icon1 {
        margin-left: 5px;
        width: 15px;
        height: 15px;
        // background-color: red;
        background: url("@/assets/AnalysisCropOutput/XIAJIANG@2x.png") no-repeat
          center;
        background-size: 100% 100%;
      }
    }
  }
  .AnalysisCropOutput-box5 {
    width: 380px;
    height: 30px;
    position: absolute;
    top: 365px;
    left: 10px;
    display: flex;
    justify-content: space-between;
    .Box5-1 {
      width: 112px;
      height: 30px;
    }
    .Box5-2 {
      width: 137px;
      height: 30px;
    }
    .Box5-3 {
      width: 112px;
      height: 30px;
    }
  }
  .AnalysisCropOutput-box6 {
    width: 380px;
    height: 190px;
    position: absolute;
    top: 400px;
    left: 10px;
  }
  .AnalysisCropOutput-box7 {
    width: 150px;
    height: 32px;
    position: absolute;
    top: 660px;
    right: 87px;
    font-size: 22px;
    text-align: right;
    color: #59f9e1;
    // background-color: red;
  }
  .AnalysisCropOutput-box8 {
    width: 377px;
    height: 80px;
    position: absolute;
    top: 704px;
    right: 11px;
    display: flex;
    align-items: center;
  }
  .AnalysisCropOutput-box9 {
    width: 377px;
    height: 80px;
    position: absolute;
    top: 790px;
    right: 11px;
    display: flex;
    align-items: center;
  }
  .AnalysisCropOutput-box10 {
    width: 377px;
    height: 80px;
    position: absolute;
    top: 876px;
    right: 11px;
    display: flex;
    align-items: center;
  }
  .Box8-1 {
    margin-left: 10px;
    width: 65px;
    height: 65px;
    background: url("@/assets/AnalysisCropOutput/HUANXINGTU_1@2x.png") no-repeat
      center;
    background-size: 100% 100%;
  }
  .Box8-2 {
    margin-left: 16px;
    width: 130px;
    height: 56px;
    position: relative;
    .Box8-2Tit {
      position: absolute;
      font-size: 16px;
      left: 0;
      top: 3px;
      color: #fff;
      font-weight: 600;
    }
  }
  .wenzi-box {
    margin-top: 28px;
    width: 100%;
    height: 26px;
    font-size: 14px;
    color: #e0f0ff;
    span {
      font-size: 16px;
      font-weight: 600;
    }
  }
  .JinduBox {
    width: 100%;
    height: 5px;
    position: absolute;
    bottom: 0px;
    left: 0px;
  }
  .Box8-3 {
    margin-left: 16px;
    width: 130px;
    height: 56px;
    position: relative;
  }
}
</style>
